<template>
  <div class="app-container">
      
      <el-row   >
        <el-col :span="6"><el-button type="primary" @click="newDialogAnalog = true">新建模拟诊断</el-button></el-col>
        <el-col :span="10"><el-input v-model="searchText" placeholder="请输入内容"></el-input></el-col>
        <el-button type="primary" >搜索</el-button>
      </el-row>
      <el-table :data="PageList" height="500px" border stripe>
          <el-table-column prop="id" label="序号" ></el-table-column>
          <el-table-column  label="创建时间" >
            <template slot-scope="scope">{{scope.row.createTime | timeFilter}}</template>
          </el-table-column>
          <el-table-column prop="name" label="标题" ></el-table-column>
          <el-table-column  label="历史发布" >
              <template slot-scope="scope">
                  <el-tag  v-if="scope.row.paperPublished=1" type="success" @click="dialogHistory(scope.row)">查看</el-tag>
                  <el-tag v-else type="danger">未发布</el-tag>
              </template>
          </el-table-column>
          <!-- <el-table-column label="查看学生成绩">
              <el-button type="primary"  @click="dialogStudentVisible=true">查看成绩</el-button>
          </el-table-column> -->
          <el-table-column  label="发布" >
            <template slot-scope="scope">
              <el-button type="primary" @click="publishAnalog(scope)">选择班级</el-button>
            </template>
          </el-table-column>
      </el-table>
    

    <!-- 新建模拟对话框 -->
    <el-dialog title="新建模拟诊断" width="65%"  :visible.sync="newDialogAnalog">
      <el-form :model="newDialogAnalogFrom">
        <el-form-item label="编号" >
          {{newDialogAnalogFrom.id}}
        </el-form-item>
        <el-form-item label="标题" >
          <el-input  autocomplete="off" v-model="newDialogAnalogFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="病例信息" >
          <el-input type="textarea" :rows="6" v-model="newDialogAnalogFrom.content" class="caseIInput"></el-input>
          <el-button type="primary" icon="el-icon-search">
            上传图片
            <input title="上传图片" type="file" name="file" multiple @change="selectPhoto($event)" />
          </el-button>
            <!-- <el-upload
              class="avatar-uploader"
              action=activeUrl()
              :show-file-list="true"
              :http-request="handleHttpRequery"
              :on-success="handleAvatarSuccess"
              >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
        </el-form-item>
        <el-form-item label="答案"  class="textArea">
          <el-input type="textarea" v-model="newDialogAnalogFrom.correct" :rows="5"  ></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newDialogAnalog = false">返回</el-button>
        <el-button type="primary" @click="newDialogEvent">新建</el-button>
      </div>
    </el-dialog>
    <!-- 历史发布对话框 -->
    <el-dialog title="历史发布" :visible.sync="dialogHistoryVisible">
      <el-table :data="dialogHistoryShow">
        <el-table-column property="className" label="班级" width="100"></el-table-column>
        <el-table-column  label="时间" width="200">
          <template slot-scope="scope">{{scope.row.paperPublishedTime | timeFilter}}---{{scope.row.paperPublishedTimeEnd | timeFilter}}</template>
        </el-table-column>
        <el-table-column property="name" label="取消发布" width="200">
          <template slot-scope="scope">
           <el-button type="primary" @click="unPublish(scope.row)">取消发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 查看学生成绩对话框 -->
     <!-- <el-dialog title="学生成绩" :visible.sync="dialogStudentVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="次数" width="150"></el-table-column>
        <el-table-column property="name" label="时间" width="200"></el-table-column>
        <el-table-column property="name" label="取消发布" width="200">
          <template>
           <el-button type="primary">取消发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
    <!-- 发布对话框 -->
    <el-dialog title="发布" :visible.sync="dialogReleaseVisible">
         <el-form ref="form"  label-width="80px">
            <el-form-item label="选择试卷">
              {{testTitele}}
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker
                v-model="publishData.paperPublishedTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="完成时间">
              <el-date-picker
                v-model="publishData.paperPublishedTimeEnd"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="班级范围">
              <el-select v-model="publishData.classId" placeholder="请选择活动区域">
                <el-option v-for="(item,i) in classList" :key="i" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <template>
                <el-radio  label="1">提交试卷后可立即查看试卷分数及答案</el-radio>
                <el-radio  label="2">过期后才可查看分数于试卷</el-radio>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="publishPage">立即发布</el-button>
              <el-button  @click="dialogReleaseVisible=false">取消</el-button>
            </el-form-item>
         </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getnewAnalog ,uploadPicture, getPageList,getpublishPage,getunPublish,getSimulationPageList} from '@/api/TeachingCenter/analogDiagnosis'
import { getClassList} from '@/api/TeachingCenter/classManage'
  export default {
    data(){
      return {
        // 搜索
          searchText:'',
        // 历史发布
          dialogHistoryVisible:false,
              // 历史发布列表展示
          dialogHistoryShow:[],
              // 历史发布请求对象参数
          dialogHistoryQuery:{
            paramName: "id",
            paramOperator: "EQ",
            value:0,
          },
                // 取消历史发布请求对象参数
          unPublishQuery:{
            classId:0,
            id:0
          },
          // dialogStudentVisible:false,
          // ------发布
          dialogReleaseVisible:false,
          testTitele:'',
          publishData:{
            classId:'',
            id:'',
            paperPublished:0,
            paperPublishedTimeEnd:'',
            paperPublishedTime:''
          },
          //新建模拟诊断
          imageUrl: '',
          newDialogAnalog:false,
          newDialogAnalogFrom:{
            correct:'',
            name:'',
            content:'',
            createTime: "",
            createUser: 0,
            deleted: 0,
            gradeLevel: 1,
            id: 0,
            pics:[
              // {chapterId: 0,
              //   fileGuid: "",
              //   id: 0,
              //   picPath: "/ss",
              //   picType: 0}
                ],
            questionTextContentId: 0,
            score: 0,
            subjectId: 0,
            subjectName: "",
            suggestTime: 0
          },
          textarea:'',
          // 分页数据
          PageList:[],
          // 班级列表
          classList:[]
      }
    },
    created:function(){
      this.analogList()
      // this.getClass()
    },
    methods:{
      selectPhoto(event) {
        let fileList = event.target.files;
        console.log(fileList,'fileList');
        for (let idx = 0; idx < fileList.length; idx++) {
          const element = fileList[idx];
          this.uploadImg(element)
        }
        // event.srcElement.value = "";
      },
      async uploadImg(image) {
        var formdata = new FormData()
        formdata.append('image',image)
        const {data} = await uploadPicture(formdata)
        console.log(data);
        this.newDialogAnalogFrom.pics.push({
          // chapterId: 0,
          // fileGuid: "",
          // id: 0,
          picPath: data.url,
          picType: 2
        })
      },
      // 新建模拟诊断
      async newDialogEvent(){
       const data = await getnewAnalog(this.newDialogAnalogFrom)
       console.log(data);
       this.newDialogAnalog=false
       },
      //  上传图片
       handleAvatarSuccess(response, file, fileList){
         console.log(response);
       },
      async handleHttpRequery(a){
         var formdata = new FormData()
         console.log(a.file);
         formdata.append('image',a.file)
         console.log(formdata);
         const data = await uploadPicture(formdata)
         console.log(data);
       },
       activeUrl(){
            // uploadPicture()
       },
      //  请求分页
      async analogList(){
        const data = await getPageList({})
        console.log(data);
        this.PageList = data.data.records
        this.PageList.createTime=this.PageList.createTime
        console.log(this.PageList);
      },
      // 获取班级列表
      async getClass(){
        const data = await getClassList({})
        this.classList = data.data.records
        console.log(this.classList);
      },
       // 历史发布列表
      async dialogHistory(row){
        this.dialogHistoryVisible=true
        this.dialogHistoryQuery.value = row.id
        const {data} = await getSimulationPageList(this.dialogHistoryQuery)
        this.dialogHistoryShow=data.records
        console.log(this.dialogHistoryShow);
      },
        // 取消历史发布
      async unPublish(data){
        this.unPublishQuery.id= data.id
        this.unPublishQuery.classId= data.classId
        const ms = await getunPublish(this.unPublishQuery)
        console.log(ms);
        this.dialogHistory()
      },
      // 发布对话框
      publishAnalog(rowDate){
        this.dialogReleaseVisible=true
        this.publishData.classId=
        this.publishData.id=rowDate.row.id
        this.publishData.paperPublished=1
        console.log(this.publishData);
      },
      // 发布
      async publishPage(){
        console.log(this.publishData);
       const data =await getpublishPage(this.publishData)
        console.log(111);
       console.log(data);
       this.dialogReleaseVisible=false
      },
    
    },
    filters:{
      timeFilter:function(value){
      let dt = new Date(value);
      let y = dt.getFullYear();
      let m = dt.getMonth()+1;
      let d = dt.getDate();
      return `${y}-${m}-${d}`
    }
   }
}
</script>

<style>
    .el-card{
    margin: auto;
    height: 500px;
    width: 75%;
  }
  .el-table{
    margin-top: 5px;
  }
  .textArea{
    margin-top: 60px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
  .caseIInput{
    margin-bottom: 100px;
  }
 
</style>